<!--
 * @Author: zulezhe
 * @Date: 2021-01-13 14:04:15
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-01-20 19:12:50
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\05.绘制安卓机器人.html
-->
<!--
 * @Author: zulezhe
 * @Date: 2021-01-18 16:29:13
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-01-20 16:31:36
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\04.绘制圆.html
-->
<!--
 * @Author: zulezhe
 * @Date: 2021-01-13 11:19:20
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-01-18 18:47:17
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\03.文字绘制.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>安卓机器人</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="canvas-container"></div>
    <script>
      window.onload = () => {
        // 参考 https://www.jianshu.com/p/be11bcadbd46
        // 开始新的路径
        ctx.beginPath();
        // 描边色
        ctx.strokeStyle = "green";
        // 线宽
        ctx.lineWidth = 40;
        //左手
        ctx.moveTo(400, 400);
        ctx.lineTo(400, 500);
        // 右手
        ctx.moveTo(700, 400);
        ctx.lineTo(700, 500);

        //左腿
        ctx.moveTo(500, 600);
        ctx.lineTo(500, 730);
        //右腿
        ctx.moveTo(600, 600);
        ctx.lineTo(600, 730);
        // 线帽
        ctx.lineCap = "round";
        // 描边
        ctx.stroke();

        // 身体
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.moveTo(450, 400);
        ctx.lineTo(650, 400);
        ctx.lineTo(650, 600);
        ctx.arcTo(650, 650, 600, 650, 40);

        ctx.lineTo(600, 650);

        ctx.arcTo(450, 650, 450, 600, 40);

        ctx.closePath();
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.stroke();

        // 头部
        ctx.beginPath();
        ctx.arc(550, 390, 100, 0, Math.PI, true);
        ctx.closePath();
        ctx.fill();
        // 眼睛
        ctx.beginPath();
        ctx.arc(500, 360, 8, 0, Math.PI * 2, true);
        ctx.arc(600, 360, 8, 0, Math.PI * 2, true);
        ctx.fillStyle = "#fff";
        ctx.fill();
        // 天线
        ctx.beginPath();
        ctx.moveTo(440, 260);
        ctx.lineTo(480, 340);

        ctx.moveTo(650, 260);
        ctx.lineTo(610, 340);
        ctx.lineWidth = 6;
        ctx.stroke();
      };
    </script>
    <script src="./index.js"></script>
  </body>
</html>
